import React, { useState } from "react";
import "./selectlist.less";

interface ISelectProps {
  title: string; // 列表的标题
  list: IOption[];
  onChange: (value: string) => void; // 内部的选项变化的时候的回调
}

export default function SelectList({ title, list, onChange }: ISelectProps) {
  // 当前是第几个的索引
  const [index, setIndex] = useState(0);
  const onLiClick = (idx: number, item: IOption) => {
    setIndex(idx);
    onChange(item.value);
  };
  return (
    <div className="select-list">
      <h4>{title}</h4>
      <ul className="flex warp">
        {list.map((item, idx) => (
          <li
            onClick={() => onLiClick(idx, item)}
            key={item.value}
            className={["sel-list-item", index === idx ? "active" : ""].join(
              " "
            )}
          >
            {item.text}
          </li>
        ))}
      </ul>
    </div>
  );
}
